<template>
  <UserLayout :active-index="activeIndex" :active-menu="activeMenu">

      <!-- 个人资料内容区 -->
      <div class="profile-area">
          <div class="profile-header">
            <h2>个人资料</h2>
            <p>管理您的个人资料和账户设置</p>
          </div>

          <div class="profile-content">
            <!-- 用户基本信息 -->
            <el-card class="profile-card">
              <template #header>
                <div class="card-header">
                  <span>基本信息</span>
                  <el-button
                      v-if="!editingProfile"
                      type="primary"
                      @click="editingProfile = true"
                      icon="Edit"
                  >
                    编辑资料
                  </el-button>
                  <div v-else>
                    <el-button @click="cancelEditProfile">取消</el-button>
                    <el-button type="primary" @click="saveProfile" :loading="loading.save">保存</el-button>
                  </div>
                </div>
              </template>

              <el-row :gutter="40" class="profile-info-row">
                <el-col :span="6">
                  <div class="avatar-section">
                    <el-upload
                        class="avatar-uploader"
                        :action="uploadAction"
                        :show-file-list="false"
                        :on-change="handleAvatarChange"
                        :before-upload="beforeAvatarUpload"
                        :auto-upload="false"
                        accept="image/*"
                    >
                      <img v-if="userProfile.avatar" :src="userProfile.avatar" class="avatar" />
                      <el-avatar v-else :size="100" icon="User">
                        <el-icon><User /></el-icon>
                      </el-avatar>
                      <div v-if="editingProfile" class="avatar-overlay">
                        <el-icon><Camera /></el-icon>
                        <span>更换头像</span>
                      </div>
                    </el-upload>
                    <h3>{{ userProfile.username || '未设置用户名' }}</h3>
                    <p class="user-role">{{ getRoleName(userProfile.role) }}</p>
                  </div>
                </el-col>

                <el-col :span="18">
                  <div class="profile-details">
                    <el-form
                        :model="userProfile"
                        label-width="80px"
                        :disabled="!editingProfile"
                        class="profile-form"
                    >
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="用户名">
                            <el-input v-model="userProfile.username" placeholder="请输入用户名" />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="手机号">
                            <el-input v-model="userProfile.phone" placeholder="请输入手机号" />
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="邮箱">
                            <el-input v-model="userProfile.email" placeholder="请输入邮箱" disabled />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="性别">
                            <el-radio-group v-model="userProfile.gender">
                              <el-radio value="男">男</el-radio>
                              <el-radio value="女">女</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="生日">
                            <el-date-picker
                                v-model="userProfile.birthday"
                                type="date"
                                placeholder="选择日期"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                style="width: 100%"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="所在城市">
                            <el-input v-model="userProfile.city" placeholder="请输入所在城市" />
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <el-form-item label="个人简介">
                        <el-input
                            v-model="userProfile.bio"
                            type="textarea"
                            :rows="3"
                            placeholder="请输入个人简介"
                        />
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </el-card>

            <!-- 账户安全 -->
            <el-card class="profile-card">
              <template #header>
                <div class="card-header">
                  <span>账户安全</span>
                  <el-button type="primary" @click="showChangePasswordDialog = true">
                    修改密码
                  </el-button>
                </div>
              </template>

              <div class="security-section">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="security-item">
                      <div class="security-icon">
                        <el-icon><Lock /></el-icon>
                      </div>
                      <div class="security-info">
                        <h4>登录密码</h4>
                        <p>定期修改密码，保护账户安全</p>
                      </div>
                      <el-button link type="primary" @click="showChangePasswordDialog = true">
                        修改
                      </el-button>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="security-item">
                      <div class="security-icon">
                        <el-icon><Phone /></el-icon>
                      </div>
                      <div class="security-info">
                        <h4>手机验证</h4>
                        <p v-if="userProfile.phone">已绑定手机：{{ userProfile.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</p>
                        <p v-else>未绑定手机号</p>
                      </div>
                      <el-button link type="primary">更换</el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>

            <!-- 身份认证 -->
            <el-card class="profile-card">
              <template #header>
                <div class="card-header">
                  <span>身份认证</span>
                  <el-button
                      v-if="!userProfile.isIdentityVerified"
                      type="primary"
                      @click="applyCertification"
                  >
                    申请认证
                  </el-button>
                </div>
              </template>

              <div class="certification-section">
                <div class="certification-status">
                  <el-icon :class="['certification-icon', { certified: userProfile.isIdentityVerified }]">
                    <component :is="userProfile.isIdentityVerified ? 'SuccessFilled' : 'Warning'" />
                  </el-icon>
                  <div class="certification-info">
                    <h4>{{ userProfile.isIdentityVerified ? '已认证' : '未认证' }}</h4>
                    <p>{{ userProfile.isIdentityVerified ? '您的身份已通过认证' : '完成身份认证可获得更多功能权限' }}</p>
                  </div>
                </div>

                <div v-if="userProfile.isIdentityVerified && userProfile.realName" class="certification-details">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <div class="certification-item">
                        <span class="label">真实姓名：</span>
                        <span>{{ userProfile.realName }}</span>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="certification-item">
                        <span class="label">身份证号：</span>
                        <span v-if="userProfile.identityCard">{{ userProfile.identityCard.replace(/(\d{4})\d{10}(\d{4})/, '$1**********$2') }}</span>
                        <span v-else>未提供</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>

            <!-- 房源统计部分已移除，因为用户身份不是固定的 -->
          </div>
        </div>

      <!-- 修改密码对话框 -->
      <el-dialog
          v-model="showChangePasswordDialog"
          title="修改密码"
          width="500px"
      >
        <el-form :model="passwordForm" label-width="100px">
          <el-form-item label="原密码">
            <el-input
                v-model="passwordForm.oldPassword"
                type="password"
                show-password
            />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
                v-model="passwordForm.newPassword"
                type="password"
                show-password
            />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                show-password
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showChangePasswordDialog = false">取消</el-button>
            <el-button type="primary" @click="changePassword" :loading="loading.changePassword">确定</el-button>
          </span>
        </template>
      </el-dialog>
  </UserLayout>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserLayout from '@/components/layout/UserLayout.vue'
import api from '@/utils/api'
import { userLogout } from '@/utils/auth'
import { uploadImageToOSS } from '@/utils/oss'
import {
  Edit,
  Camera,
  Lock,
  Phone,
  SuccessFilled,
  Warning,
  User
} from '@element-plus/icons-vue'

const router = useRouter()
const activeMenu = ref('profile')
const activeIndex = ref('1')
const editingProfile = ref(false)
const showChangePasswordDialog = ref(false)

// 用户资料数据
const userProfile = reactive({
  id: null,
  username: '',
  email: '',
  phone: '',
  gender: '男', // 默认性别
  birthday: '',
  city: '',
  bio: '',
  avatar: 'https://housinghub-system.oss-cn-hangzhou.aliyuncs.com/avatar/%E5%A4%B4%E5%83%8F/%E5%A4%B4%E5%83%8F/%E8%B5%A0.png', // 默认头像将在获取用户信息时设置
  role: null,
  roleName: '',
  isIdentityVerified: false,
  realName: '',
  identityCard: '',
  createTime: ''
})

// 计算属性
const uploadAction = computed(() => {
  return '/housingHub/oss/upload/images'
})

// 获取角色名称
const getRoleName = (role) => {
  const roleMap = {
    1: '租客',
    2: '房东',
    3: '中介',
    4: '中介'
  }
  return roleMap[role] || '普通用户'
}

// 加载状态
const loading = reactive({
  profile: false,
  save: false,
  changePassword: false
})

// 房源统计数据已移除

// 修改密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 顶部导航栏跳转
const goToHome = () => {
  router.push('/')
}

const goToSearch = () => {
  router.push('/house/search')
}

const goToPublish = () => {
  router.push('/house/publish')
}

const goToMessages = () => {
  router.push('/message')
}

// 用户命令处理
const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      userLogout()
      ElMessage.success('退出登录成功')
      router.push('/login')
      break
  }
}

// 侧边栏跳转
const goToPublishNew = () => {
  router.push('/house/publish')
}

const goToMyHouses = () => {
  router.push('/house/my-houses')
}

const goToAgentApply = () => {
  router.push('/agent/apply')
}

const goToAgentStatus = () => {
  router.push('/agent/status')
}

const goToAgentHouses = () => {
  router.push('/agent/houses')
}

const goToTenant = () => {
  router.push('/rental/tenant')
}

const goToLandlord = () => {
  router.push('/rental/landlord')
}

const goToAgentRental = () => {
  router.push('/rental/agent')
}

const goToProfile = () => {
  router.push('/profile')
}

// 菜单选择处理
const handleSelect = (key) => {
  switch (key) {
    case '1':
      router.push('/')
      break
    case '2':
      router.push('/house/search')
      break
    case '3':
      router.push('/house/publish')
      break
    case '4':
      router.push('/message')
      break
  }
}

// 获取用户个人资料
const fetchUserProfile = async () => {
  try {
    loading.profile = true
    const response = await api.get('/user/profile')

    if (response.data.code === '200') {
      const profileData = response.data.data

      // 设置默认值
      if (!profileData.gender) {
        profileData.gender = '男'
      }
      if (!profileData.avatar) {
        // 根据性别设置默认头像
        profileData.avatar = profileData.gender === '女'
          ? 'https://housinghub-system.oss-cn-hangzhou.aliyuncs.com/avatars/default-female.png'
          : 'https://housinghub-system.oss-cn-hangzhou.aliyuncs.com/avatars/default-male.png'
      }

      Object.assign(userProfile, profileData)
    } else {
      ElMessage.error(response.data.message || '获取个人资料失败')
    }
  } catch (error) {
    console.error('获取个人资料失败:', error)
    ElMessage.error('获取个人资料失败')
  } finally {
    loading.profile = false
  }
}

// 头像上传前验证
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }
  return true
}

// 处理头像上传
const handleAvatarChange = async (file) => {
  if (!beforeAvatarUpload(file.raw)) {
    return
  }

  try {
    loading.save = true
    ElMessage.info('正在上传头像...')

    // 上传到OSS
    const avatarUrl = await uploadImageToOSS(file.raw)
    userProfile.avatar = avatarUrl

    // 立即保存到数据库
    const profileData = {
      username: userProfile.username,
      phone: userProfile.phone,
      gender: userProfile.gender,
      birthday: userProfile.birthday,
      city: userProfile.city,
      bio: userProfile.bio,
      avatar: avatarUrl
    }

    const response = await api.put('/user/profile', profileData)

    if (response.data.code === '200') {
      ElMessage.success('头像更新成功')
      // 更新右上角用户信息
      await updateUserInfo()
    } else {
      ElMessage.error(response.data.message || '头像保存失败')
    }
  } catch (error) {
    console.error('头像上传失败:', error)
    ElMessage.error('头像上传失败: ' + error.message)
  } finally {
    loading.save = false
  }
}

// 取消编辑资料
const cancelEditProfile = () => {
  editingProfile.value = false
  ElMessage.info('已取消编辑')
}

// 更新用户信息到localStorage（用于同步右上角显示）
const updateUserInfo = async () => {
  try {
    const response = await api.get('/user/profile')
    if (response.data.code === '200') {
      const profileData = response.data.data

      // 设置默认头像
      if (!profileData.avatar) {
        profileData.avatar = profileData.gender === '女'
          ? 'https://housinghub-system.oss-cn-hangzhou.aliyuncs.com/avatars/default-female.png'
          : 'https://housinghub-system.oss-cn-hangzhou.aliyuncs.com/avatars/default-male.png'
      }

      // 更新localStorage中的用户信息
      localStorage.setItem('userInfo', JSON.stringify(profileData))

      // 触发页面刷新用户信息（通过事件）
      window.dispatchEvent(new CustomEvent('userInfoUpdated', { detail: profileData }))
    }
  } catch (error) {
    console.error('更新用户信息失败:', error)
  }
}

// 保存资料
const saveProfile = async () => {
  try {
    loading.save = true

    const profileData = {
      username: userProfile.username,
      phone: userProfile.phone,
      gender: userProfile.gender,
      birthday: userProfile.birthday,
      city: userProfile.city,
      bio: userProfile.bio,
      avatar: userProfile.avatar
    }

    const response = await api.put('/user/profile', profileData)

    if (response.data.code === '200') {
      editingProfile.value = false
      ElMessage.success('资料已保存')
      // 更新右上角用户信息
      await updateUserInfo()
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存个人资料失败:', error)
    ElMessage.error('保存失败')
  } finally {
    loading.save = false
  }
}

// 修改密码
const changePassword = async () => {
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('新密码与确认密码不一致')
    return
  }

  try {
    loading.changePassword = true

    const response = await api.put('/user/change-password', {
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword,
      confirmPassword: passwordForm.confirmPassword
    })

    if (response.data.code === '200') {
      showChangePasswordDialog.value = false
      ElMessage.success('密码修改成功')

      // 重置表单
      passwordForm.oldPassword = ''
      passwordForm.newPassword = ''
      passwordForm.confirmPassword = ''
    } else {
      ElMessage.error(response.data.message || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    ElMessage.error('密码修改失败')
  } finally {
    loading.changePassword = false
  }
}

// 申请认证
const applyCertification = () => {
  ElMessageBox.confirm(
      '您将被引导至身份认证页面，确认继续吗？',
      '申请认证',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
  ).then(() => {
    router.push('/certification/apply')
  }).catch(() => {
    // 用户取消操作
  })
}

// 页面加载时获取用户资料
onMounted(() => {
  fetchUserProfile()
})
</script>

<style scoped>
.profile-container {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* 精美的动态背景 */
.dynamic-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #1a2980, #26d0ce);
  overflow: hidden;
}

/* 建筑物 */
.building {
  position: absolute;
  bottom: 0;
  background: rgba(30, 30, 50, 0.8);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
}

.building-1 {
  left: 10%;
  width: 80px;
  height: 300px;
  animation: buildingGlow 4s infinite alternate;
}

.building-2 {
  left: 25%;
  width: 120px;
  height: 400px;
  animation: buildingGlow 5s infinite alternate-reverse;
}

.building-3 {
  left: 45%;
  width: 100px;
  height: 350px;
  animation: buildingGlow 6s infinite alternate;
}

.building-4 {
  left: 65%;
  width: 140px;
  height: 450px;
  animation: buildingGlow 4.5s infinite alternate-reverse;
}

.building-5 {
  left: 80%;
  width: 90px;
  height: 320px;
  animation: buildingGlow 5.5s infinite alternate;
}

@keyframes buildingGlow {
  0% {
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 -5px 25px rgba(100, 200, 255, 0.6);
  }
}

/* 云朵 */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  filter: blur(2px);
}

.cloud-1 {
  top: 20%;
  left: 5%;
  width: 80px;
  height: 30px;
  animation: cloudMove 25s linear infinite;
}

.cloud-2 {
  top: 35%;
  left: 70%;
  width: 120px;
  height: 40px;
  animation: cloudMove 30s linear infinite;
}

.cloud-3 {
  top: 15%;
  left: 40%;
  width: 100px;
  height: 35px;
  animation: cloudMove 35s linear infinite;
}

@keyframes cloudMove {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(calc(100vw + 100px));
  }
}

/* 太阳 */
.sun {
  position: absolute;
  top: 80px;
  right: 100px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ffeb3b, #ffc107);
  border-radius: 50%;
  box-shadow: 0 0 40px #ff9800, 0 0 80px #ff5722;
  animation: sunPulse 3s infinite alternate;
}

@keyframes sunPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 40px #ff9800, 0 0 80px #ff5722;
  }
  100% {
    transform: scale(1.1);
    box-shadow: 0 0 60px #ff9800, 0 0 100px #ff5722;
  }
}

/* 光线 */
.light-ray {
  position: absolute;
  top: 120px;
  right: 140px;
  width: 400px;
  height: 200px;
  background: linear-gradient(to right, transparent, rgba(255, 235, 59, 0.2), transparent);
  transform-origin: left center;
  animation: rayRotate 10s infinite linear;
}

.ray-1 {
  transform: rotate(0deg);
  animation-delay: 0s;
}

.ray-2 {
  transform: rotate(60deg);
  animation-delay: 2s;
}

.ray-3 {
  transform: rotate(120deg);
  animation-delay: 4s;
}

@keyframes rayRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 浮动装饰元素 */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 15s infinite linear;
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  left: -100px;
  animation-duration: 20s;
  background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, transparent 70%);
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -80px;
  right: -80px;
  animation-duration: 25s;
  animation-direction: reverse;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.2) 0%, transparent 70%);
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 20%;
  animation-duration: 15s;
  background: radial-gradient(circle, rgba(80, 227, 194, 0.2) 0%, transparent 70%);
}

.shape-4 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-duration: 18s;
  animation-direction: reverse;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.2) 0%, transparent 70%);
}

.shape-5 {
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 22s;
  background: radial-gradient(circle, rgba(155, 89, 182, 0.2) 0%, transparent 70%);
}

.shape-6 {
  width: 180px;
  height: 180px;
  top: 70%;
  left: 10%;
  animation-duration: 28s;
  background: radial-gradient(circle, rgba(231, 76, 60, 0.2) 0%, transparent 70%);
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, 20px) rotate(90deg);
  }
  50% {
    transform: translate(0, 40px) rotate(180deg);
  }
  75% {
    transform: translate(-20px, 20px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

.profile-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  z-index: 1;
  position: relative;
}

.top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.app-title {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.navbar-center {
  flex: 1;
  margin: 0 20px;
}

:deep(.el-menu--horizontal) {
  border: none;
  background: transparent !important;
}

:deep(.el-menu--horizontal .el-menu-item) {
  color: white;
  border: none;
}

:deep(.el-menu--horizontal .el-menu-item:hover) {
  background: rgba(255, 255, 255, 0.2) !important;
}

:deep(.el-menu--horizontal .el-menu-item.is-active) {
  color: #4A90E2 !important;
  border: none;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: white;
}

.username {
  font-size: 16px;
  font-weight: 500;
}

.profile-area {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.profile-area::-webkit-scrollbar {
  width: 8px;
}

.profile-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.profile-area::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.6);
  border-radius: 4px;
}

.profile-area::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.8);
}

.profile-header {
  margin-bottom: 30px;
}

.profile-header h2 {
  color: #2c3e50;
  font-size: 28px;
  margin: 0 0 10px;
}

.profile-header p {
  color: #7f8c8d;
  margin: 0;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-section {
  text-align: center;
}

.avatar-uploader {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-uploader:hover .avatar-overlay {
  opacity: 1;
}

.user-role {
  color: #7f8c8d;
  margin: 10px 0 0;
}

.profile-form {
  padding: 0 20px;
}

.profile-form :deep(.el-form-item) {
  margin-bottom: 24px;
}

.profile-form :deep(.el-form-item__label) {
  font-weight: 600;
  color: #2c3e50;
}

.profile-form :deep(.el-input__wrapper) {
  border-radius: 8px;
}

.profile-form :deep(.el-textarea__inner) {
  border-radius: 8px;
}

.profile-form :deep(.el-date-editor) {
  border-radius: 8px;
}

.security-section {
  padding: 20px 0;
}

.security-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 15px;
}

.security-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: #4A90E2;
  font-size: 20px;
}

.security-info {
  flex: 1;
}

.security-info h4 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #2c3e50;
}

.security-info p {
  margin: 0;
  font-size: 14px;
  color: #7f8c8d;
}

.certification-section {
  padding: 20px 0;
}

.certification-status {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.certification-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffebee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #f44336;
  margin-right: 20px;
}

.certification-icon.certified {
  background: #e8f5e9;
  color: #4caf50;
}

.certification-info h4 {
  margin: 0 0 5px;
  font-size: 20px;
  color: #2c3e50;
}

.certification-info p {
  margin: 0;
  font-size: 14px;
  color: #7f8c8d;
}

.certification-details {
  padding: 0 20px;
}

.certification-item {
  display: flex;
  margin-bottom: 15px;
}

.certification-item .label {
  width: 100px;
  font-weight: 600;
  color: #2c3e50;
}

.stats-section {
  padding: 20px 0;
}

.stat-card {
  display: flex;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-content {
  flex: 1;
  padding: 15px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 14px;
  color: #7f8c8d;
}

.bg-blue {
  background: linear-gradient(135deg, #4A90E2 0%, #6b93d8 100%);
}

.bg-green {
  background: linear-gradient(135deg, #7ED321 0%, #8bc34a 100%);
}

.bg-orange {
  background: linear-gradient(135deg, #FFA500 0%, #ffb74d 100%);
}

.bg-red {
  background: linear-gradient(135deg, #FF6B6B 0%, #ff8a80 100%);
}

.bg-purple {
  background: linear-gradient(135deg, #9B59B6 0%, #ba68c8 100%);
}

@media (max-width: 992px) {
  .sidebar {
    width: 80px;
  }

  .app-title,
  .el-menu-item span,
  .el-sub-menu__title span {
    display: none;
  }

  .profile-header {
    text-align: center;
  }

  .card-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .avatar-section {
    margin-bottom: 20px;
  }

  .stats-section .el-row {
    flex-direction: column;
    gap: 15px;
  }

  .stats-section .el-col {
    width: 100%;
  }

  .security-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .security-icon {
    margin-right: 0;
  }

  .certification-status {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .certification-icon {
    margin-right: 0;
  }

  .certification-details .el-row {
    flex-direction: column;
    gap: 15px;
  }

  .certification-details .el-col {
    width: 100%;
  }
}
</style>
